<template>
  <div class="cart-wrapper">

    <div class="main">
      <div class="goods-box" v-for="(itme,index) in 3" :key="index" :style="index === 0 ? 'margin-top: .5rem;' : ''">
        <van-checkbox v-model="checked" style="margin-right: .375rem;" />
        <img src="@/assets/logo.png" alt="" class="goods-cover">
        <div class="goods-info">
          <span class="goods-name">HUAWEI Meta40 Pro + 5G全网通手机 125G</span>
          <div class="goods-num-box">
            <span class="price">¥6488</span>
            <van-stepper v-model="goodsNum" />
          </div>
        </div>
      </div>
    </div>

  <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="checked">全选</van-checkbox>
  </van-submit-bar>

  </div>

  
</template>

<script lang="ts">
import { defineComponent,ref,Ref } from 'vue'

export default defineComponent({
    setup() {
        const checked:Ref<number> = ref(0)

        const onSubmit = (e: Event) => {
          console.log(e);
        }

        const goodsNum: Ref<number> = ref(0)

        return {
          checked,
          onSubmit,
          goodsNum
        }
    },
})
</script>


<style lang="less" scoped>
.cart-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  height: calc(100% - 1.25rem - 1.22667rem);
  overflow: hidden;
  padding-bottom: 1.33333rem;

  .main {
    flex: 1;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.goods-box {
  display: flex;
  align-items: center;
  margin-bottom: .375rem;
  padding: 0 .375rem;
  overflow: auto;

  .goods-cover {
    width: 2.5rem;
    height: 2.5rem;
  }

  .goods-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    margin-left: .375rem;

    .goods-name {
      font-size: .375rem;
      .text-overflow();
      margin-bottom: .25rem;
    }
    
  .goods-num-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

    .price {
      color: @base-color;
      font-size: .46875rem;
    }
  }
}
:deep(.van-submit-bar__price) {
  color: @base-color;
}

:deep(.van-submit-bar__button--danger) {
  background: @base-color;
}

:deep(.van-checkbox__icon--checked .van-icon) {
  background-color: @base-color;
  border-color: @base-color;
}

:deep(.van-submit-bar) {
  position: absolute;
}
</style>